Advanced CSS3 and HTML5

Introduction

Welcome to Lesson 6! We're going to explore one of the most powerful and underrated elements you can add to an advanced Web page: the form.

Forms are everywhere on the Web—and for good reason. They're the most effective and versatile way of getting information from your website's visitors, and that makes them an essential part of advanced Web design.

Forms can be simple. Perhaps the single most popular type of form on the Web is the search box. The minimalist page design at Craigslist, for example, centers on a search box.

The search box at Craigslist

Other forms are complex. For instance, I count at least 13 fields in the form below for booking flights at Southwest Airlines. They range from a field for choosing to view fares in dollars or points (I'm a little short on both) to a field for entering a promotional code (I don't have one of those either!).

Exploring flight options at Southwest Airlines

Adding a working form to your site involves four steps:

1. Create a form in HTML.
2. Add form fields.
3. Make the form accessible and inviting.
4. Define where the form data will go and how it'll get there.

We'll cover the first two steps in this lesson and the last two in Lesson 7. In both lessons, we'll talk about the importance of creating forms that are inviting and accessible.

The Role of Forms

Forms are everywhere. Just about every substantial website uses them. Without forms, people couldn't buy things online, participate in online polls or forums, post to Facebook, or sign up for an online newsletter. They couldn't search with Google or Bing or book a flight at an airline's site.

Some of these examples involve complex forms. They require a back-end database that collects, sorts, organizes, and responds to form input instantly. When you buy a book at Amazon, for example, form data goes into computers that calculate shipping and sales tax, check and update inventory stocks, and later generate that annoying suggestion that since you ordered a book on back pain, you might be interested in a new book on aging gracefully. If you're interested in building these kinds of back-end scripts and databases, check out the courses Introduction to PHP and MySQL and Intermediate PHP and MySQL. I've taken both, and I found them very useful.

Other forms, however, don't require such sophisticated databases. A feedback form, for example, is a way to get free advice and input from visitors to your site. A visitor simply fills out a form that automatically goes into his or her email client (such as Microsoft Outlook, Windows Live Mail, Apple Mail, or freeware Eudora) and makes its way to you. You can even collect data that will enable you to build mailing lists and feedback forms for activist groups, fan clubs, support groups, and so on.

Server-Side and Client-Side Form Actions

Let's get technical for a moment. Obviously, form data has to go somewhere, or what's the point? Somehow, the information a visitor enters into a form has to lead to some kind of action.

This can happen in two ways: client-side form handling and server-side form handling. Client-side form handling means that the management of a form's input happens entirely within a browser (client is essentially another term for browser).

The most typical example of a client-side form is a jump menu for navigation. When a visitor chooses a page from a jump menu, a code that's part of or linked to the Web page itself manages that input and sends that visitor to the page he or she chose.

A client-side jump menu form
to navigate a tech-support site

You probably already know that a server is a huge, centralized computer that manages vast amounts of data. Server-side form handling sends form data to a server, which stores it. Sometimes other scripts running on the server act on that data. Even sending form data by email is server-side form handling, since the data goes over an email server.

What You Can Do With Forms

As an advanced Web designer, you may be involved with forms in three ways.

• You may find yourself in a large-scale Web development environment where you work closely with back-end programmers. In this case, you'll design forms, and programmers will develop code on servers to process the information that users submit.
• Or you may be a one-person-team creating an entire website. In that case, you can define simple form-handling processes using email, as we'll explore in this lesson.
• You might want to use online resources that provide server hosting and scripting support. Many of these resources offer free scripts and hosting. For instance, some will manage mail lists of less than 500 names. They allow you to collect names and email addresses through forms linked to their server scripts and then generate mailings to that list. We'll explore those resources in Lesson 7.

In all these scenarios, advanced Web designers build forms that are easy to use, attractive, and reliable. So let's get started doing that right now!

Working With Signup and Feedback Forms

One of the most useful and easy-to-make forms is a signup form. It collects the names of people who want to hear from you, and I've already talked about how valuable that is.

We've also talked about feedback forms. Having one of those on your site accomplishes several things:

• It shows you care what people think of your site.
• It allows you to enlist visitors as free proofreaders and testers who report errors or glitches in your site.
• It can be a doorway to a signup form, where visitors who share feedback feel they're part of a community and can stay in touch.

To create a feedback form, open a new file in your HTML code editor, and save it as form.html.

Enter or paste this code into the form.html file. This code defines a document title and includes some introductory text that encourages users to fill out the form:

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="UTF-8">  
<title>Form</title> 
<link href="style.css" rel="stylesheet" type="text/css"> 
</head> 
<body> 
<div id="wrapper">
<h1>Feedback . . . Stay in Touch</h1>
</div>
</body>
</html>

This HTML file has a link to a style sheet called style.css, so we can use the same style sheet we've been using for other pages in our site. (If you haven't yet created a CSS file for your site, don't worry. You won't need the CSS style sheet in this lesson. We'll focus on styling in our next lesson, when we'll concentrate on making our forms inviting and accessible.)

Defining a Form

Now that our basic page is set up, it's time to add the form.

We'll use the form tag to define the form. Remember, the form tag encloses everything that's part of the form. So as you add form fields to collect information such as name, email address, rating, and comments, be sure to place those form fields inside the <form> and </form> tags.

We need to define several properties in our form as we set it up:

• Action: The form action defines what happens to the form when a visitor submits it. While some forms connect to complex databases that database experts manage, we'll handle our form more simply. When a visitor clicks Submit after filling out the form, his or her email client will launch, and the content of the email will consist of the data the visitor has entered into the form.
• Method: The form method determines how to submit the form. There are two form methods: get and post. In most cases, you'd use a get form method when downloading data into a form from a server and a post form method when sending data somewhere.
• Enctype: The form enctype (which stands for encryption type) defines how to handle the text in the form. If you were posting data to an online database, you'd probably use "multipart/form-data." But we're going to use a simpler enctype, "plain text," that uploads data as regular text.
• Name: Every form has a name. We've named ours form.

Let's define a form that submits the entered data to an email address. Enter the following code after the close of the </h1> tag. (If you want to test the form by linking it to your email address, substitute your email address for the placeholder content.)

<form action="mailto:email@email.com" method="post" enctype="text/plain" name="form">
</form>

And you can define subject line text by adding ?subject=xxx to the form action, as in this example:

<form action="mailto:email@email.com?subject=Signup Form" method="post" enctype="text/plain" name="form">

There's nothing to preview yet, as the form itself doesn't show up in a browser. But we've created the basic content packager for a form, and we're ready to add form fields.

Creating Form Fields

Form fields are different ways of collecting data in a form. Text boxes (which hold a single line of text) and text area boxes (which can hold multiple lines of text) allow visitors to enter email addresses, names, phone numbers, credit-card numbers, and comments.

Other kinds of form fields present people with choices. A select menu, for instance, provides a list of choices. This is a convenient way of letting people choose a topic in a search form—for example, the person's job title or the person's preferred date to book a flight.

Check boxes and groups of radio buttons also present choices. Visitors can use a set of radio buttons to rate a site on a scale of 1 to 10 or to specify the type of credit card they're using. And check boxes allow someone to say yes or no to an offer or to sign up for a newsletter.

Let's see how you can populate your form.

Adding a Text Field

The most basic, most widely used, and most flexible way to collect data in a form is through a text field. To define a text field, use the HTML <input> element. The rules for naming form fields are similar to those for naming files: Avoid special characters (such as ? / * @) and spaces. You don't have to restrict names to lowercase.

If you wish, you can define the size of the field in characters. The syntax for a text field called name (which you might use to collect a visitor's name) that displays 32 characters is:

<p>
<input type="text" name="name" size="32">
</p>

Add this code inside your <form> element! Remember, all form fields have to be inside the <form> and </form> tags. So if I zoom out a bit, the code for the entire form now looks like this:

<form action="mailto:email@email.com" method="post" name="form"> 
<p> 
<input type="text" name="name" size="32"> 
</p>   
</form>

The most accessible way to tell visitors what information to enter into a form field is through a label element. These usually go before a form field. Labels are associated with input field names. Every label uses the syntax <label for="name">Name</label>, where the value of "name" is the same as the name parameter in an input field. That's more complicated to explain than it is to demonstrate, so here's our form with a label added to the name field:

<form action="mailto:email@email.com" method="post" name="form"> 
<p> 
<label for="name">Name</label> 
<input type="text" name="name" size="32"> 
</p>   
</form>

Use the following code to add fields that collect name and email information (setting the size of the mail field at 40 characters), along with heading-3 text telling visitors what to enter into the form. Place this code above the closing form tag. 

<p>
<label for="email">Email</label>  
<input name="email" type="text" size="40"> 
</p>

You can save your HTML file and open it in a browser to see the two form fields you've created so far. The form isn't "submittable" yet—we'll need to add a submit button for that. But you can enter a little information into the fields to get a feel for how visitors will experience them.

Testing the text fields

Adding a Text Area Field

Because text area fields allow multiple lines of data entry, they're great for collecting comments.

The syntax for a text area field requires a name, as all fields do. But instead of a size, you define columns (the number of characters someone can type into a line) and rows (the number of lines).

Add the following code above the closing </form> tag to define a form field called comments that's 60 characters wide and six rows high. The code includes a heading that lets visitors know what to enter into the field.

<p>
<label for="comments">Comments?</label><br>
<textarea name="comments" cols="60" rows="6"></textarea> 
</p>

Here's another opportunity to save and preview the form. Put yourself in the shoes of a visitor to your site, and enter a comment.

Remember, we'll worry about style and enhanced accessibility in the next lesson. For now, we'll focus on building the form.

Can I Set Limits on the Length of User Messages?

HTML5 has a new parameter to define a maximum number of characters in a textarea field. The syntax is maxlength="x" where "x" is a value. This only applies in browsers that support HTML5.

Defining Choices

Our fields so far—the text boxes for name and email and the area text box for comments—allow people to enter anything they want. Other types of form fields restrict the data a visitor can enter. One of them is a group of radio buttons, where a visitor has to choose one option from a set.

Radio button groups are similar to select menus, which pop up with a set of predefined choices. I like select menus better than radio button groups, but both provide visitors with a set of choices. As we'll see in later lessons, select menus are much more accessible in mobile devices than tiny radio buttons are.

Radio buttons (top) and select menu (bottom)

Check boxes provide simple choices. Let's add one to our form.

Adding a Check Box

Check boxes allow visitors to opt in or out, choose yes or no, or make some other choice that has two options. It's an ideal type of field to allow people who fill out your feedback form to get on your email list (or not).

Check boxes require just one property: a name. Add the following line of code before the closing </form> tag:

<p> 
<input type="checkbox" name="maillist"> 
<label for"maillist">Put me on your e-list!</label>
</p>

Note that the label explaining what the check box does ("Put me on your email list!") comes after the check box. Check boxes and radio buttons are the only kinds of form fields where people expect to see an explanation of the form field after they see the form field itself.

A Quick Detour Into Business Ethics

You can define a check box as selected by default by adding the parameter "checked" inside the check box element. For example:

<input type="checkbox" name="maillist" checked>

Is that ethical? Is it appropriate? That depends on circumstances, and it's your call. We'll discuss it further in the FAQs for this lesson.

Adding a Select Menu Field

Select menus are a good way to provide visitors with a set of choices. You'll often see them on forms that ask what state or province you're in.

Select menus have names and a set of options. Here's the syntax for an option menu named Where. It lets visitors tell you how they found out about your site. The code includes text to explain the form field.

Add this code to your file—put it just before the closing </form> tag:

<p>
<label for "where">How did you find us?</label>
<select name="where">
      <option value="Search engine">Search engine</option>
      <option value="Word of mouth">Word of mouth</option>
      <option value="Craigslist">Craigslist</option>
      <option value="Other">Other</option>
</select>
</p>

Of course, you can change the value and the display text for any option. And you can add as many options as you like. (I often run into lists of 50 when choosing "State" on many forms.)

Let's see how the form looks when you save your page and preview in a browser. Ignore my styling—yours will be different, or it may be missing entirely, but we're not worrying about that in this lesson. If you're following along step by step, your form should look something like this:

Testing check box, text area, and option menu

Let's move on to Chapter 4 and finish the form.

Finishing the Form

Now that you've created a variety of form fields, it's time to add buttons that allow visitors to submit the form or to reset it (clearing all the fields) if they aren't happy with the content they entered.

We'll also review and test the action property we created to submit the form through the email program on a visitor's computer.

Adding a Submit Button

The submit button triggers the action that handles the form data—in this case, launching an email program with the form data that's already in the email. The syntax for a Submit button is:

<input type="submit" value="xxx"/>

Where you see xxx, substitute the text of the label that will appear on the form button.

Add this code to your form just before the closing form tag. Remember: All form content must be within the <form> and </form> tags!

<p><input type="submit" value="Click here to submit the form"/></p>

We'll test that button when we review and test the action.

Adding a Reset Button

Reset buttons are optional, but they're a helpful service for people who want to start over when filling out a form. The syntax for a reset button is similar to that of a submit button:

<input type="reset" value="xxx"/>

Instead of xxx, type in the text of the label that will appear on the submit button.

Add this code to your form just before the closing </form> tag. Again, all form content must be within the <form> and </form> tags, or the button won't work.

<p><input type="reset" value="Click here to reset the form"/></p>

Test the reset button by saving the HTML file in your text editor and opening it in a browser (refreshing or reloading the browser window if necessary). The reset button should clear all data you entered into your form.

Testing a reset button

Testing the Submit Button

The submit button in our form activates the form action property. In a professional-level form that connects to some kind of script running on a server, the form action links to a script on a server. Often that script is in the PHP scripting language. Other commonly used back-end scripts include Ruby, Perl, ASP, and JSP.

We'll generate a back-end script to manage form data in our next lesson. For now, our simple email action will be enough to test the form.

Warning!

Submitting form data through an email won't work in some configurations of Windows email clients. Our form action relies on the browser launching an email program (such as Apple Mail, Microsoft Outlook, Windows Live Mail, or Eudora) when a user clicks on an email address in his or her browser. However, some Windows environments lack the configuration to launch the defined email client when a user clicks the email link. If that's the case, then our testing scenario won't work.

Solving the issue is a bit more complicated than just testing the form in a browser other than Internet Explorer. You'd have to configure the email client to launch when the user clicks an email link in a browser, and that involves different things in different environments. You'd also have to reconfigure how your computer handles email. Walking you through all that is beyond the scope of this lesson.

In most cases, you'll be able to use this simple form action (mailing the form data to an email address) to test the form. And if that doesn't work, don't worry about it. In the next lesson, we'll use more robust tools for managing form data.

Are you ready to test your form? If you like, you can copy my completed page HTML:

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="UTF-8">  
<title>Form</title> 
<link href="style.css" rel="stylesheet" type="text/css"> 
</head> <body> <div id="wrapper">   
<h1>Feedback . . . Stay in touch</h1>   
<form action="mailto:email@email.com" method="post" name="form"> 
<p> 
<label for="name">Name</label> <input type="text" name="Name" size="32"> 
</p> 
<p>
<label for="email">Email</label>
<input name="email" type="text" size="40"> 
</p> 
<p><label for="comments">Comments?</label><br> 
<textarea name="comments" cols="60" rows="6"></textarea> 
</p> 
<p>  
<input type="checkbox" name="maillist">  
<label for="maillist">Put me on your e-list!</label> </p> 
<label for="where">How did you find us? </label> 
<select name="where">
       <option value="Search engine">Search engine</option>
       <option value="Word of mouth">Word of mouth</option>
       <option value="Craigslist">Craigslist</option>
       <option value="Other">Other</option> 
</select> 
</p> 
<p>
<input type="submit" value="Click here to submit the form"/>
</p> 
<p>
<input type="reset" value="Click here to reset the form"/>
</p>
</form> 
</div> 
</body> 
</html>  

How'd you do? Feel free to talk to me in the Discussion Area if you have questions about how forms work or about what kinds of forms might work on sites you're developing.

Let's go to the next chapter and wrap up our first forms lesson.

Summary

Let's review key concepts in building forms:

• Enclose all form fields within the <form> tags. Here's a useful metaphor: Imagine you're sending a package of stuff to someone (a care package to a friend or family member away from home, for example, with chocolate, clean socks, a greeting card, and some photos). If you leave any item out of the box, that item won't ship. I'll remind you as we go along that all form fields have to be within the form.
• A form has two kinds of elements within it: ones that collect information (such as a box to collect a name or email address), and ones that control when and how the data goes somewhere (such as a submit button).

In this lesson, we explored the most useful form fields:

• Text fields collect a single line of text, such as names or email addresses.
• Text area fields collect multiple lines of content, such as comments.
• Check boxes allow visitors to opt in or opt out.
• Select menus and option menus present choices in a drop-down menu format. (To allow users to make multiple selections from a <select> menu element, add a multiple parameter: <select multiple>.)

And you created two buttons—a submit button that triggers the form action, and a reset button that clears the form data so that a user can start over.

Our form action was the simplest option: sending the form data to an email address using the visitor's email client. You can find more sophisticated systems online, including ones that automatically create, maintain, and manage mail lists. And many of them are free if you have a relatively small number of contacts (say, less than 500).

In the next lesson, you'll discover more sophisticated ways of collecting data. We'll also touch up the styling of our form to make it more inviting and accessible.

Don't forget that you still have an assignment and a quiz to tackle before you fine-tune your form in Lesson 7.